<template>
	<view class="details">
		<view class="syspadding navbar">
			<view class="navbarh acea-row row-between-wrapper">
				<view class="acea-row row-middle backbtn" @click="back">
					<image class="back" src="../../static/images/back.png" mode="aspectFit"></image>
					<text style="margin-left: -10rpx;">返回</text>
				</view>
				<view class="fs-34">收入纳税明细详情</view>
				<view class="backbtn" style="text-align: right;padding-right: 20rpx;">申诉</view>
			</view>
		</view>
		<view style="width: 100%;height: 180rpx;"></view>
		
		<view class="content">
			<view class="item acea-row row-middle">
				<view class="line"></view>
				<view class="bold">纳税明细信息</view>
			</view>
			<view class="text">
				<view class="acea-row row-between-wrapper">
					<view class="fc-888">收入：</view>
					<view>{{ info.price }}元</view>
				</view>
				<view class="acea-row row-between-wrapper mt-20">
					<view class="fc-888">已申报税额：</view>
					<view >{{ info.benPrice }}元</view>
				</view>
				<view class="acea-row row-right row-middle mt-20 jisuan">
					<text>查看税款计算</text>
					<text class="iconfont icon-xiangyou"></text>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="item acea-row row-middle">
				<view class="line"></view>
				<view class="bold">纳税明细-基础情况</view>
			</view>
			<view class="text">
				<view class="acea-row row-between">
					<view class="fc-888">所得项目小类：</view>
					<view>{{ info.shuiwuType }}</view>
				</view>
				<view class="acea-row row-between mt-20">
					<view class="fc-888" style="width: 220rpx;">扣缴义务人名称：</view>
					<view class="right">{{ info.group_name }}</view>
					<!-- <view class="right">广西锦绣前程人力资源股份有限公司</view> -->
				</view>
				<view class="acea-row row-between mt-20">
					<view class="fc-888" style="width: 220rpx;">扣缴义务人纳税人识别号：</view>
					<view>{{ info.shuiwuNumber }}</view>
				</view>
				<view class="acea-row row-between mt-20">
					<view class="fc-888" style="width: 220rpx;">主管税务机关：</view>
					<view class="right">{{ info.jiguan }}</view>
					<!-- <view class="right">国家税务总局南宁高新技术产业开发区税务局</view> -->
				</view>
				<view class="acea-row row-between mt-20">
					<view class="fc-888" style="width: 220rpx;">申报渠道：</view>
					<view class="right">{{ info.qudao }}</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="text">
				<view class="acea-row row-between">
					<view class="fc-888">申报日期：</view>
					<view>{{ info.shuiwuDate }}</view>
				</view>
				<view class="acea-row row-between mt-20">
					<view class="fc-888">税款所属日期：</view>
					<view>{{ info.date }}</view>
				</view>
			</view>
		</view>
		
		<view class="tips">
			温馨提示：专项附加扣除和个人养老金已体现在税款计算过程中，在本期数据中不予显示。
			您可在“税款计算-累计收入与扣除详情”中查看。
			<text>查看税款计算</text>
		</view>
		
		<view class="content" style="margin: 0;">
			<view class="item acea-row row-middle">
				<view class="line"></view>
				<view class="bold">本期收入与扣款详情</view>
			</view>
			<view class="text" style="padding: 0 0 30rpx 0;">
				<view class="acea-row row-between mt-20 px-30">
					<view class="fc-888">本期收入：</view>
					<view style="margin-right: 60rpx;">{{ info.price }}元</view>
				</view>
				<view class="acea-row row-between mt-20 px-30">
					<view class="fc-888">本期免税收入：</view>
					<view style="margin-right: 60rpx;">0.00元</view>
				</view>
				<view class="acea-row row-between mt-20 px-30">
					<view class="fc-888">本期减除费用：</view>
					<view style="margin-right: 60rpx;">{{ info.jianmianPrice }}元</view>
				</view>	
				<view class="" style="margin-top: 20rpx;" @click="openDetail()">
				      <collapse-item collapseName="本期专项扣除" :price="info.zhuanPrice" ref="collapse">
				        <template v-slot:content>
				          <view class="acea-row row-between-wrapper" v-if="info.yanglaoPrice>0">
							  <view class="fc-888">基本养老保险</view>
							  <view>{{ info.yanglaoPrice }}元</view>
						  </view>
						  <view class="acea-row row-between-wrapper" style="margin-top: 40rpx;" v-if="info.yiliaoPrice>0">
							  <view class="fc-888">基本医疗保险</view>
							  <view>{{ info.yiliaoPrice }}元</view>
						  </view>
						  <view class="acea-row row-between-wrapper" style="margin-top: 40rpx;" v-if="info.shiyePrice>0">
							  <view class="fc-888">失业保险</view>
							  <view>{{ info.shiyePrice }}元</view>
						  </view>
						  <view class="acea-row row-between-wrapper" style="margin-top: 40rpx;" v-if="info.zhufangPrice>0">
								  <view class="fc-888">住房公积金</view>
								  <view>{{ info.zhufangPrice }}元</view>
						  </view>
				        </template>
				      </collapse-item>
				</view>
				
				<view class="acea-row row-between mt-20 px-30">
					<view class="fc-888">本期其他扣除：</view>
					<view style="margin-right: 60rpx;">0.00元</view>
				</view>
				<view class="acea-row row-between mt-20 px-30">
					<view class="fc-888" style="width: 280rpx;">本期准予扣除的捐赠项目：</view>
					<view style="margin-right: 60rpx;">0.00元</view>
				</view>
			</view>
		</view>
		
		<view style="width: 100%;height: 150rpx;"></view>
		
	</view>
</template>

<script>
	import { shuiwuDetails } from '@/api/user.js'
	import collapseItem from '@/components/yixiao-collapseItem/yixiao-collapseItem.vue'
	export default {
		components:{
			collapseItem
		},
		data() {
			return {
				isOpen: false,
				id:'',
				info:[],
				
			};
		},
		onLoad(options) {
			this.id = options.id;	
			this.getinfo();
		},
		methods:{
			getinfo(){
				let that = this;
				shuiwuDetails({ year_child_id:that.id }).then(res=>{
					that.info = res.data.data;
				})
			},
			//手风琴
			openDetail () {
			  this.$refs.collapse.isOpen = !this.isOpen;
			  this.isOpen = !this.isOpen;
			},
			back(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.details{
		
		.tips{
			width: 100%;
			padding: 30rpx;
			font-size: 28rpx;
			background-color: #EAF4FE;
			margin-top: 30rpx;
			line-height: 40rpx;
			
			text{
				color: #4A89D7;
			}
		}
		
		.content{
			width: 100%;
			margin-top: 30rpx;
			background-color: #ffffff;
			
			.text{
				background-color: #ffffff;
				padding: 30rpx;
				
				.jisuan{
					color: #5186E6;
					font-size: 26rpx;
				}
				
				.right{
					width: 400rpx;
					text-align: right;
				}
				
			}
			
			.item{
				padding: 30rpx;
				border-bottom: 1rpx solid #f2f2f2;
				.line{
					width: 10rpx;
					height: 30rpx; 
					border-radius: 10rpx;
					background-color: #5186E6;
					margin-right: 10rpx;
				}
			}
		}
		
		.navbar{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100vw;
			background-color: #ffffff;
			
			.navbarh{
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				
				.backbtn{
					color: #5186E6;
					width: 150rpx;
				}
				.back{
					width: 60rpx;
					height: 60rpx;
					margin-left: -20rpx;
				}
			}
		}
	}
</style>
